<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>弹幕姬示例</title>
</head>

<body style="background-color: white;display: flex;flex-flow: column-reverse nowrap;">
    <script>
        const externalCss = document.createElement('style')
        document.head.append(externalCss)
        function println(content) {
            if (!content) return
            document.body.append(document.createTextNode(content))
            document.body.append(document.createElement("br"))
        }
        const handlers = {
            update: {
                user(newValue) {
                    console.log('用户信息更新了', newValue)
                },
                option(newValue) {
                    console.log('插件配置更新了', newValue)
                },
                css(newValue){
                    console.log('css更新了',newValue);
                    externalCss.innerHTML = newValue
                }
            },
            event: {
                LIVE_OPEN_PLATFORM_DM(e) {
                    println(e.message)
                }
            }
        }
        //监听事件
        window.addEventListener('message', e => {
            const { category, type, args } = e.data
            handlers[category]?.[type]?.apply(e, args)
        })
        // 订阅事件
        parent.postMessage({
            fun: 'subscribe',
            args: Object.keys(handlers.event)
        }, '*')
    </script>
</body>

</html>